<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3加载进度条</title>
    <style>
    /*第二步：Css3 实现。 animation 动画控制 */
    html,body{
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    
    .loader-container {
        height: 100%;
        width: 0%;
        background: -webkit-linear-gradient(left,#f8dc4b,#d95a3d);
        border-radius:7px;
        box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2);
        /* 给进度条一个动画，从宽度0到100% 需要5秒
        forwards为动画结束时的状态，就是加载到100%就不动了
        infinite为动画无限循环，加载到100%后继续在循环*/
        animation: loader 5s forwards;
    }
    /* keyframes被称为关键帧，其类似于Flash中的关键帧。
    动画加载到每一个百分比，你都可以给他更改不同的样式
    从而达到一个不同变化的效果 */
    @keyframes loader {
        0% {
            width: 0%;
        }
        100% {
            width: 100%;
        }
    }

    .progress{
        width: 30%;
        height: 15px;
        border-radius:7px;
        margin: 30% auto;
        background: -webkit-linear-gradient(left,#e4e3e4,#e4e5e4);
    }  
    </style>
</head>
<body>
    <!-- 第一步：html布局，progress背景，loader-container进度条 -->
    <div class="progress">
        <!--进度条-->
        <div class="loader-container"></div>
    </div>
</body>
</html>